<template>
  <div id="app">
    <el-container id="containerfull">
      <el-header v-if="fullScreen" style="height:70px">
        <div class="img-box">
        </div>
        <div class="bar-box">
          <a href="#/" @click="chooseBar(1)" :class="barIndex==1?'bar-active':''">图表</a>
          <a href="#/report/monthReport" @click="chooseBar(2)" :class="barIndex==2?'bar-active':''">报表</a>
          <a href="#/last/last-eight-chats" @click="chooseBar(3)" :class="barIndex==3?'bar-active':''">消息中心</a>
          <a href="javascript:;" @click="chooseBar(4)" :class="barIndex==4?'bar-active':''">订单管理</a>
        </div>
        <div class="admin-box">
          <ul class="admin-wrapper">
            <li class="admin-full-screen" @click="isFullScreen">全屏</li>
            <li class="admin-line"></li>
            <li class="admin-user">admin</li>
            <li class="admin-line"></li>
            <li class="admin-home"></li>
            <li class="admin-line"></li>
            <li class="admin-sign-out"></li>
          </ul>
        </div>
      </el-header>
      <el-container>
        <el-aside width="inherit" v-if="fullScreen">
          <el-menu class="el-menu-vertical-demo"
                   @open="handleOpen"
                   @close="handleClose"
                   background-color="#182536"
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   :collapse="isCollapse"
          >
            <el-menu-item index="0">
              <p class="side-btn" @click="showBar"></p>
              <span slot="title">展开</span>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-location"></i>
              <span slot="title">导航一</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <!--startprint-->
          <el-main>
            <router-view :isChange="isChange"/>
          </el-main>
          <!--endprint-->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isCollapse: true,
      activeIndex: '1',
      fullScreen:true,
      isChange:1,
      barIndex:sessionStorage.getItem('barIndex') || 1
    };
  },
  mounted(){
    let that = this;
    //检测屏幕尺寸变化，当退出全屏时执行操作
    window.onresize = function() {
      if (!that.checkFull()) {
        //要执行的动作
        that.fullScreen = !that.fullScreen;
        setTimeout(()=>{
          that.isChange++
        },10)
      }
    }
  },
  methods:{
    //选择头部筛选栏
    chooseBar(num){
      this.barIndex = num;
      sessionStorage.setItem('barIndex',num)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    showBar(){
      this.isCollapse = !this.isCollapse;
      setTimeout(()=>{
        this.isChange++
      },300)
    },
    //检测是否可退出
    checkFull() {
      let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      //to fix : false || undefined == undefined
      if (isFull === undefined) {isFull = false;}
      return isFull;
    },
    //浏览器退出全屏
    exitFullscreen() {
      if(document.exitFullscreen) {
        document.exitFullscreen();
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    //浏览器全屏
    launchFullscreen(element) {
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    isFullScreen(){
      let element = document.documentElement;
      this.launchFullscreen(element);
      this.fullScreen = !this.fullScreen;
      setTimeout(()=>{
        this.isChange++
      },10)
    }
  }
}
</script>

<style>
html,body{
  width:100%;
  height:100%;
  background:#182536;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height:100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
.el-container{
  height:100%;
}
.el-main{
  padding:0;
  background: -webkit-linear-gradient(left bottom,#181e2c 0%,#262721 27%,#1e3930 34%,#252f4a 72%,#1e2247 100%);
  background: linear-gradient(left bottom,#181e2c 0%,#262721 27%,#1e3930 34%,#252f4a 72%,#1e2247 100%);
}
.el-header{
  padding:0;
  height:70px;
  background: -webkit-linear-gradient(left,#141729 45%,#12272c 70%,#112142 100%);
  background: -o-linear-gradient(left,#141729 45%,#12272c 70%,#112142 100%);
  background: -moz-linear-gradient(left,#141729 45%,#12272c 70%,#112142 100%);
  background: -mos-linear-gradient(left,#141729 45%,#12272c 70%,#112142 100%);
  background: linear-gradient(left,#141729 45%,#12272c 70%,#112142 100%);
}
  .img-box{
    width:200px;
    height:100%;
    float:left;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
    background:url('./assets/img/logo.png') no-repeat center center;
  }
  .bar-box{
    float:left;
    overflow:hidden;
    margin-left:30px;
  }
  .bar-box a{
    float:left;
    color: #9b9aad;
    font-size:18px;
    margin-right:50px;
    text-decoration: none;
    height:40px;
    margin-top:15px;
    box-sizing:border-box;
    line-height:40px;
  }
  .bar-box a:hover{
    border-bottom:solid 2px #e7224a;
    color:#fff;
  }
  .bar-box .bar-active{
    border-bottom:solid 2px #e7224a;
    color:#fff;
  }
.el-menu--horizontal{
  border-bottom:0;
}
  .el-menu{
    border-right:0;
  }
  .icon-container{
    float:left;
    line-height:70px;
    color:#fff;
    cursor:pointer
  }
  /*admin-box 样式*/
  .admin-box{
    float:right;
    margin-right:20px;
    line-height:70px;
    color:#fff;
  }
  .admin-box ul{
    overflow:hidden;
  }
  .admin-box ul li{
    float:left;
    color:#fff;
    padding:0 20px;
    cursor:pointer;
    font-size:16px;
  }
  .admin-box ul .admin-line{
    padding:0;
    height:16px;
    width:1px;
    background:#9b9aad;
    margin-top:27px;
  }
  .admin-box ul .admin-full-screen{
    padding-left:56px;
    background:url('./assets/img/fullScreen.png') no-repeat 20px center;
  }
 .admin-box ul .admin-user{
   padding-left:56px;
   background:url('./assets/img/admin.png') no-repeat 20px center;
 }
 .admin-box ul .admin-home{
   width:26px;
   height:70px;
   background:url('./assets/img/home.png') no-repeat center center;
 }
  .admin-box ul .admin-sign-out{
    width:26px;
    height:70px;
    background:url('./assets/img/signOut.png') no-repeat center center;
  }
  /*侧边导航样式*/
  .side-btn{
    width:100%;
    height:100%;
    background:url('./assets/img/close.png') no-repeat center center;
  }
  .el-menu-item, .el-submenu__title {
    height: 44px;
    line-height: 44px;
  }
</style>
